<template>
  <div class="main-content">
    <div class="title">歌手列表</div>
    <div class="singer-container">
      <div v-for="singer in singers" :key="singer.id" class="singer-item" @click="onSinger(singer.name)">
        <img :src="singer.avatar" alt="歌手头像" width="95%" />
        <p>{{ singer.name }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 定义歌手列表数据
const singers = ref([]);

// 接收父组件传递的方法
const emit = defineEmits(['singer']);

const onSinger = (song) => {
  emit('singer', song);
};

// 在组件挂载时获取歌手数据
onMounted(async () => {
  try {
    const response = await axios.get('/song/singer.json'); 
    singers.value = response.data;
  } catch (error) {
    console.error('获取歌手数据失败:', error);
  }
});
</script>

<style scoped>
.singer-container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.singer-item {
  width: 25%;
  text-align: center;
}

.singer-item img {
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.singer-item p {
  font-size: 16px;
  margin: 0;
}
</style>